<template>
  <div class="main-title">
    <h1>{{ title }}</h1>
    <div class="current-time">{{ currentTime }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

interface Props {
  title?: string
}

const props = defineProps<Props>()
const title = props.title || '校园智慧中枢系统'
const currentTime = ref(new Date().toLocaleString())

let timeInterval: number | null = null

onMounted(() => {
  timeInterval = setInterval(() => {
    currentTime.value = new Date().toLocaleString()
  }, 1000)
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script>

<style scoped>
.main-title {
  text-align: center;
  padding: 1vh 0;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

h1 {
  font-size: 2.8rem;
  color: #00d4ff;
  margin: 0;
  letter-spacing: 3px;
}

.current-time {
  color: #00d4ff;
  font-size: 1.1rem;
  margin-top: 0.5vh;
  letter-spacing: 1px;
}

@media (max-width: 1200px) {
  h1 {
    font-size: 2.2rem;
  }
}
</style>
